import 'dart:convert';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:creatures_world/framework/custom/ext_widget/widget_util.dart';
import 'package:creatures_world/framework/utils/sized_box_util.dart';
import 'package:creatures_world/pages/base/base_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

import '../../get/routers.dart';
import 'favor_controller.dart';

class FavorPage extends BasePage<FavorController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      backgroundColor: Colors.blueAccent,
      appBar: AppBar(
          backgroundColor: Colors.blueAccent,
          leading: Icon(Icons.arrow_back_ios,color: Colors.white,).prop(onTap: (){
            Get.back();
          }),
          title: Text("Your favor list", style: GoogleFonts.poppins(fontSize: 19.sp, fontWeight: FontWeight.w500, color: Colors.white))),
      body: Container(
        padding: EdgeInsets.only(left: 15.w, right: 15.w),
        child: Obx(() {
          int itemCount = controller.favorList.length;

          return ListView.separated(
            scrollDirection: Axis.vertical,
            itemBuilder: (ctx, index) {
              dynamic data = controller.favorList.value[index];
              String taxonStr = data['taxon'];
              dynamic taxon = jsonDecode(taxonStr);
              dynamic defaultPhoto = taxon["default_photo"];
              String url =  defaultPhoto["medium_url"]??defaultPhoto["url"];

              return Container(
                width: double.infinity,
                height: 60.h,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    sb.w(15.w),

                    Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.r)
                        ),
                        child: CachedNetworkImage(imageUrl: url,width: 50.w,height: 50.w,fit: BoxFit.cover,)),


                    sb.w(15.w),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("${data["name"]}", style: GoogleFonts.poppins(fontWeight: FontWeight.w500, color: Colors.white, fontSize: 16.sp)),
                        sb.h(5.h),
                        Text("${taxon["iconic_taxon_name"]}", style: GoogleFonts.poppins(fontWeight: FontWeight.w500, color: Colors.white.withAlpha(100), fontSize: 14.sp)),
                      ],
                    ),
                  ],
                ),
              ).prop(onTap: (){
                Get.toNamed(AppPage.ROUTER_SPDETAIL, arguments: {"data": {"taxon":taxon}});
              });
            },
            separatorBuilder: (ctx, index) {
              return Divider(height: 1,);
            },
            itemCount: itemCount,
          );
        }),
      ),
    );
  }
}
